.jui {
  .navbar {
    padding: 5px 15px 5px 15px;
    overflow: visible;
    font-size: 12px;
    .border-radius(5px);
    .navbar-white;
  }
  
  .navbar {
    ul.nav, ul.nav-right {
      display: inline-block;
      list-style: none;
      margin-left: -40px;
              
      li {
        margin: -5px 0px -5px 0px;
        padding: 7.5px 12px 7.5px 12px;
        float: left;
        
        a {
          text-decoration: none;
        }
      }
    }
    
    ul.nav-right {
      float: right;
    }
    
  }
  
  .navbar > * {
  	margin: 0;
  	vertical-align: middle;
  }
  
  // Colors
  // -------------------------

  .navbar-white {
    border: 1px solid #c9c9c9;
    .buttonBackground2Color(#ffffff, #e6e6e6);
    .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.05)");
    
    ul.nav, ul.nav-right {
      li {
        color: #777;
        text-shadow: 0 1px 0 #ffffff;
      
        &.active {
          color: #555;
          background-color: darken(#fff, 5%);
          .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
        }
        
        a {
          color: #777;

          &:focus, &:hover {
            background-color: transparent; 
            color: #333;
          }
        }
      }
    }
    
    .inline-line {
    	background-color: #dcdcdc;
    }
  }
  
  .navbar-black {
    border: 1px solid #292929 !important;
    .buttonBackground2Color(#3c3c3c, #2a2a2a) !important;
    .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1)") !important;
    
    ul.nav, ul.nav-right {
      li {
        color: #777;
        text-shadow: 0 1px 0 #2a2a2a;
      
        &.active {
          color: #555;
          background-color: darken(#3c3c3c, 5%);
          .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
        }

        a {
          color: #777;
          
          &:focus, &:hover {
            background-color: transparent; // "transparent" is default to differentiate :hover/:focus from .active
            color: #555;
          }
        }
      }
    }
    
    .inline-line {
    	background-color: darkgray;
    }
  }

  .navbar-white-flat {
    border: 1px solid #e5e5e5 !important;
    .buttonBackground2Color(#f7f7f7, #f7f7f7) !important;
    .box-shadow(0) !important;
    
    .inline-line {
    	background-color: #dcdcdc;
    }
  }

  .navbar-black-flat {
    border: 1px solid #1f1f1f !important;
    .buttonBackground2Color(#252525, #252525) !important;
    .box-shadow(0) !important;
    
    .inline-line {
    	background-color: darkgray;
    }
  }
  
  // Fixed navbar
  // -------------------------
  
  // Shared (top/bottom) styles
  .navbar.navbar-fixed-top,
  .navbar.navbar-fixed-bottom {
    position: fixed;
    right: 0;
    left: 0;
    margin-bottom: 0; // remove 18px margin for default navbar
    padding-left:  0;
    padding-right: 0;
    z-index: 1005;
    .border-radius(0);
  }
  
  .navbar.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  
  .navbar.navbar-fixed-bottom {
    bottom: 0;
    border-width: 1px 0 0;
  }
  
	// Inline
	// -------------------------
	.navbar {
		.inline {
			display: inline;
			margin-right: 20px;
		}
		
		.inline > * { 
			margin-right: 3px;
		}
		
		.inline-right {
			display: inline;
			float: right;
			margin-right: 0px;
		}
		
		.inline-row {
			display: block;
			margin-bottom: 5px;
		}
		
		.inline-row:last-child {
			margin-bottom: 0px !important;
		}
		
		.inline-line {
			display: block;
			height: 1px;
			margin-bottom: 5px;
		}
	}
}